<template>
  <!-- 安全保障-->
  <div class="security" style="margin-top: 20px;">
    <el-row style="margin-bottom: 40px;">
      <el-col :span="4" :offset="1" style='height: 400px;'>
        <el-menu
          :router='isrouter'
          default-active="1"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b" style="height: 300px;font-weight: bolder;border-radius: 20px;padding:20px;">
          <el-menu-item index="/about">
            <i class="el-icon-document"></i>
            <span slot="title">公司简介</span>
          </el-menu-item>
          <el-menu-item index="/culture">
            <i class="el-icon-star-on"></i>
            <span slot="title">企业文化</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-location-outline"></i>
            <span slot="title">联系我们</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="18" :offset="1">
        <!--面包屑导航-->
          <el-row>
              <el-col>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                  <el-breadcrumb-item>安全保障</el-breadcrumb-item>
                </el-breadcrumb>
              </el-col>
          </el-row>

        <!--具体内容-->
          <el-row style="margin-top: 50px;">
            <el-col :span="8" :offset="10">
              <h1>安全保障</h1>
            </el-col>
          </el-row>

          <el-row style="margin-top: 20px;">
            <el-col>
              <el-card class="box-card">
                <div  class="content">
                  <template  v-for="item in allInfo">
                      <p>{{item.name}}</p>
                      <template v-if="item.content!=null">
                        <el-alert
                          :closable="canClosable"
                          v-bind:title="item.content"
                          type="info">
                        </el-alert>
                      </template>
                      <template v-for="point in item.points">
                        <el-tag style="margin-bottom: 5px;margin-top: 5px;" type="warning">★{{point.name}}</el-tag>
                        <template v-for="cIndex in point.content">
                          <el-alert
                            :closable="canClosable"
                            v-bind:title="cIndex"
                            type="info">
                          </el-alert>
                        </template>
                      </template>
                  </template>
                </div>
              </el-card>
            </el-col>
          </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import request from '@/api/request';
  export default {
    name: "security",

    data() {
      return {
        msg: "Welcome to Your Vue.js App",
        isrouter:true,
        canClosable:false,
        allInfo:null
      };
    },
    mounted:function () {
        this.getAllInfo();
    },
    methods: {
      getAllInfo:function(){
        request.getAllInfo().then((data) => {
          if(data.code==0){//代表查询成功
            this.allInfo=data.data;
          }else{
            this.$message({
              message: '请求失败',
              type: 'warning'
            });
          }
        });
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .content p{
    font-size: 18px;
    font-weight: bolder;
    color:red;
  }
</style>
